<template>
  <div class="_wz_main">
    <Layout style="height: 100%;">
      <Header class="layout-header">Header</Header>
      <Layout style="height: calc(100% - 64px);">
        <Sider class="layout-sider" hide-trigger>
          <Menu theme="dark" width="100%" :active-name="activeName">
            <template v-for="item in navList">
              <MenuItem :name="item.url" :to="item.url">{{item.name}}</MenuItem>
            </template>
          </Menu>

        </Sider>
        <Content class="layout-content">

          <router-view v-slot="{ Component }">
            <keep-alive max="15" :include="include">
              <component :is="Component" />
            </keep-alive>
          </router-view>

<!--          -->
<!--          <keep-alive>-->
<!--            <router-view></router-view>-->
<!--          </keep-alive>-->
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'main',//组件名称
  components: {},//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      include:['singlePageB'],//缓存数据
      navList:[
        {name:'子应用A单页A',url:'singlePageA'},
        {name:'子应用B单页B(保活)',url:'singlePageB'},
      ],
      activeName:'',

    });


    //监听路由变化
    watch(() => router.currentRoute.value.name,(newVal, oldVal) => {
        state.activeName = newVal;
      }
    );


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      state.activeName = router.currentRoute.value.name;
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>
<style lang="less">
  ._wz_main{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: 0;
  }
</style>
